// 菜单页面
import {MenuQuery, MenuVo} from "@/api/sys/admin/menu/types";
import {Ref} from "vue";
import {deleteMenuApi, getMenuByIdApi, getMenuListApi, getMenuTreeApi} from "@/api/sys/admin/menu";
import {cloneDeep} from "@/utils/common-fn";
import {TableActionEnum} from "@/utils/enum-type";
import {openConfirm} from "@/components/MyComponent/XMessageBox";
import {DictOptions} from "@/utils/common-types";
import {commonGetOptions} from "@/utils/format-table";

export const useMenuViewStore = defineStore('menuView', () => {

    /**
     * options相关
     */
    const menuTypeOptions: Ref<DictOptions[]> = ref([])
    const statusOptions: Ref<DictOptions[]> = ref([])
    /**
     * table相关
     */
        // 用于初始化的数据(为了编译不报错)
    const initFormValue: MenuVo = {
            type: 1,
            status: 1,
            sort: 1,
            name: '',
            parent: {
                id: ""
            }
        }
    const title = '菜单'
    // 点击树时候的类型
    const treeType = ref(2)
    // table数据
    let tableData: Ref<MenuVo[]> = ref([])
    // tree-select数据
    let treeSelectData: Ref<MenuVo[]> = ref([])
    // 总数
    const total = ref(0)
    // 分页信息,以及查询条件,用于发送api
    const queryData: MenuQuery = reactive({query: {}})
    // tree是否默认展开
    const isExpandAll = ref(false)
    /**
     * 编辑相关
     */
        // 弹出框:编辑
    const editVisible = ref(false)

    // 编辑的表单数据
    const editForm: Ref<MenuVo> = ref(cloneDeep(initFormValue))


    /**
     * 添加相关
     */
        // 弹出框:编辑
    const addVisible = ref(false)

    // 编辑的表单数据
    const addForm: Ref<MenuVo> = ref(cloneDeep(initFormValue))

    /**
     * 方法相关
     */
    // 设置编辑对话框可见
    function setEditVisible(bolValue: boolean) {
        editVisible.value = bolValue
    }

    // 设置编辑对话框可见
    function setAddVisible(bolValue: boolean) {
        addVisible.value = bolValue
    }

    /**
     * 获取列表
     */
    async function getList() {
        [tableData.value, menuTypeOptions.value, statusOptions.value] =
            await Promise.all([getMenuListApi(queryData), ...commonGetOptions('menu_type', 'status')]);

    }

    // 格式化状态
    function formatStatus(row: any, column: any, value: number) {
        if (value === 1) {
            return '正常'
        } else if (value === 0) {
            return '禁用'
        }
        return '异常'
    }

    // 打开 编辑
    async function openEdit(id: number) {
        editForm.value = await getMenuByIdApi(id)
        if (!editForm.value.parent) {
            editForm.value.parent = {id: ''}
        }
        // 获取所有树节点的数据
        treeSelectData.value = await getMenuTreeApi();
        editVisible.value = true
    }

    // 删除
    async function openDelete(id: number) {
        if (await openConfirm('会级联删除的,你真的确定要删除吗? 想好啊,删了就没啦!')) {
            await deleteMenuApi(id)
            ElMessage.success(`${TableActionEnum.remove}成功`)
            await getList()
        }
    }

    function changeAddFormType() {
        if (treeType.value === 1) {
            addForm.value.type = 3
        } else if (treeType.value === 2) {
            addForm.value.type = 1
        }
    }

    // 打开 添加
    async function openAdd(row?: MenuVo) {
        addForm.value = cloneDeep(initFormValue)
        if (row) {
            addForm.value.parent = {id: row.id}
            treeType.value = row.type
            changeAddFormType()
        }
        // 获取所有树节点的数据
        treeSelectData.value = await getMenuTreeApi();
        addVisible.value = true
    }


    return {
        tableData, queryData, total, editVisible, editForm, addForm, addVisible, title,
        treeSelectData, menuTypeOptions, statusOptions, treeType,
        formatStatus, openEdit, setEditVisible, getList, openDelete, changeAddFormType,
        setAddVisible, openAdd,isExpandAll
    }
})